<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="echarts.min.js"></script>
    <title></title>
</head>
<body>
<div id="chart" style="width:100%;height:100%; background-color:inherit"></div>
<script>
    var chart;
    var longPressTimer;
    var longPressDuration = 500; // 长按判定时间(毫秒)
    var maxDisplayCount = 20;  // 最大显示数据量
    var lastDataZoom = null;
    function initChart(xData, y1Data, y2Data) {
        chart = echarts.init(document.getElementById('chart'));

        // 计算初始dataZoom范围
        var startValue = Math.max(0, xData.length - maxDisplayCount);
        var endValue = xData.length - 1;


        chart.setOption({
            backgroundColor: 'transparent',
            tooltip: { trigger: 'item',
                formatter: function(params) {
                    if (params.seriesType === 'line') {
                        const formattedValue = parseFloat(params.value[1]).toFixed(2);
                        return `Avg Rssi:${formattedValue}&nbsp;&nbsp;&nbsp;&nbsp;${params.name}`;
                    } else if (params.seriesType === 'scatter') {
                        const formattedValue = parseFloat(params.value[1]);
                        return `Current Rssi:${formattedValue}&nbsp;&nbsp;&nbsp;&nbsp;${params.name}`;
                    }
                } },
<!--            dataZoom: [{-->
<!--                type: 'inside',-->
<!--                xAxisIndex: 0,-->
<!--                startValue: startValue,-->
<!--                endValue: endValue,-->
<!--                minValueSpan: 10, // 最小显示10个数据点-->
<!--                maxValueSpan: maxDisplayCount // 最多显示100个数据点-->
<!--            }, {-->
<!--                type: 'slider',-->
<!--                xAxisIndex: 0,-->
<!--                startValue: startValue,-->
<!--                endValue: endValue,-->
<!--                minValueSpan: 10,-->
<!--                maxValueSpan: maxDisplayCount,-->
<!--                handleStyle: {-->
<!--                    color: '#FFFFFF'-->
<!--                },-->
<!--                textStyle: {-->
<!--                    color: '#FFFFFF'-->
<!--                }-->
<!--            }],-->
            xAxis: {
                type: 'category',
                data: xData,
                axisLabel: { rotate: 90, color: '#FFFFFF', interval: 0 },
                axisLine: {
                    show: true,          // 强制显示轴线
                    lineStyle: {
                        color: '#FFFFFF',// 轴线颜色
                        width: 1         // 轴线宽度
                    }
                }
            },
            yAxis: {
                    type: 'value' ,
                    max:-10,
                    min:-110,
                    interval: 10,
                    axisLabel: {  color: '#FFFFFF' },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            width: 1
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.2)'  // 网格线颜色（半透明白色）
                        }
                    }
                },
            series: [{
                name: 'Avg Rssi (Line)',
                data: y1Data.map((v,i) => ({
                    value: [i, v],  // 使用索引对应x轴文字
                    name: xData[i]
                })),
                type: 'line',
                connectNulls: true,
                zlevel: 1,
                smooth: 0.7,  //默认true = 0.5
                symbol: 'circle',
                symbolSize: 1,
                itemStyle: { // 设置数据点颜色
                    color: '#BA1A1A'
                },
                lineStyle: { width: 3,color: '#BA1A1A' },
                emphasis: {
                    itemStyle: { color: '#BA1A1A' },
                    lineStyle: { width: 3 }
                },
                triggerEvent: true
            },
            {
                name: 'Avg Rssi (Scatter)',
                type: 'scatter',
                zlevel: 2,
                data: y2Data.map((v, i) => ({ value: [i, v], name: xData[i] })),
                symbolSize: 8,
                itemStyle: { color: '#F4CB43' }, // 不同颜色区分
                emphasis: {
                    symbolSize: 8,
                    itemStyle: { color: '#F4CB43' }
                },
                triggerEvent: true
            }]
        });

<!--        chart.on('dataZoom', function(event) {-->
<!--            if (event.batch) { // 多轴情况-->
<!--                lastDataZoom.start = event.batch[0].start;-->
<!--                lastDataZoom.end = event.batch[0].end;-->
<!--            } else { // 单轴情况-->
<!--                lastDataZoom.start = event.start;-->
<!--                lastDataZoom.end = event.end;-->
<!--            }-->
<!--        });-->


<!--        chart.on('click', function(params) {-->
<!--            if(window.ChartEventHandler) {-->
<!--                ChartEventHandler.onEvent('click', JSON.stringify(params));-->
<!--            }-->
<!--        });-->

<!--        // 空白区域点击处理 - 获取最近数据点-->
<!--        chart.getZr().on('click', function(params) {-->
<!--            const pointInPixel = [params.offsetX, params.offsetY];-->

<!--            if(chart.containPixel('grid', pointInPixel)) {-->
<!--                // 改用getOption()获取最新数据-->
<!--                const option = chart.getOption();-->
<!--                const seriesData = option.series[0].data;-->

<!--                // 精确坐标转换-->
<!--                const rawIndex = chart.convertFromPixel({-->
<!--                    seriesIndex: 0,-->
<!--                    xAxisIndex: 0-->
<!--                }, pointInPixel)[0];-->

<!--                const dataIndex = Math.min(-->
<!--                    Math.max(0, Math.round(rawIndex)),-->
<!--                    seriesData.length - 1-->
<!--                );-->

<!--                if(seriesData[dataIndex]) {-->
<!--                     if(window.ChartEventHandler) {-->
<!--                        ChartEventHandler.onEvent('click', JSON.stringify(seriesData[dataIndex]));-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        });-->

<!--        chart.getZr().on('mousedown', function(params) {-->
<!--            longPressTimer = setTimeout(function() {-->
<!--                var pointInPixel = [params.offsetX, params.offsetY];-->
<!--                if(chart.containPixel('grid', pointInPixel)) {-->
<!--                    var pointInGrid = chart.convertFromPixel('grid', pointInPixel);-->
<!--                    var dataIndex = chart.convertFromPixel('series', pointInPixel)[0];-->
<!--                    if(window.ChartEventHandler) {-->
<!--                        ChartEventHandler.onEvent('longpress', JSON.stringify({-->
<!--                            dataIndex: dataIndex,-->
<!--                            x: pointInGrid[0],-->
<!--                            y: pointInGrid[1]-->
<!--                        }));-->
<!--                    }-->
<!--                }-->
<!--            }, longPressDuration);-->
<!--        });-->

<!--        chart.getZr().on('mouseup', function() {-->
<!--            clearTimeout(longPressTimer);-->
<!--        });-->
    }

    function updateChart(newXData, newY1Data, newY2Data) {
        if(newXData && newY1Data && newY2Data && chart && !chart.isDisposed()) {
                    // 计算新的dataZoom范围
            var startValue = Math.max(0, newXData.length - maxDisplayCount);
            var endValue = newXData.length - 1;
startValue = 0, endValue = 100;
            chart.setOption({
<!--                dataZoom: [{-->
<!--                    startValue: startValue,-->
<!--                    endValue: endValue-->
<!--                }],-->
                xAxis: { data: newXData },
                series: [{
                    data: newY1Data.map((v,i) => ({
                        value: [i, v],  // 使用索引对应x轴文字
                        name: newXData[i]
                    })),
                },
                {
                    data: newY2Data.map((v, i) => ({
                        value: [i, v],
                        name: newXData[i]
                    }))
                }]
            });
        }
    }
    function generateChartImage() {
        var chart = echarts.getInstanceByDom(document.getElementById('chart'));
        var imageData = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#00000033' });
<!--        可以通过evaluateJavascript的回调函数获取图片数据，不一定要用以下方式-->
<!--        if(window.ChartEventHandler) {-->
<!--           ChartEventHandler.onImageGenerated(imageData);-->
<!--        }-->
        return imageData;
    }

    function handleEmptyData() {
        if(chart && !chart.isDisposed()) {
        chart.setOption({
            title: { text: '暂无数据' },
            xAxis: { show: false },
            yAxis: { show: false },
            series: []
        });
    }
}

</script>
</body>
</html>
